// 修改登录密码
<template>
    <div class="versions">
      <div class="install-title">
        <div>
          修改密码
        </div>
      </div>
      <div class="install-main">
        <div>
          <img src="/static/img/suo.png" alt="">
        </div>
        <!-- <div @click="updateClick">
          修改密码
        </div> -->
        <el-button type="primary" size="small" @click="updateClick">修改密码</el-button>
      </div>
      <!-- 修改密码 -->
      <div class="updatePwd" v-show="updatePwdShow">
        <transition name="slide-fade">
          <div class="updatePwd-content" v-show="updatePwdShow">
            <div class="up-content-title">
              <div>
                修改密码
              </div>
              <div @click="cancelClick">
                X
              </div>
            </div>
            <div class="up-content-main">
              <div class="up-c-m-list">
                <div class="up-c-m-listLeft">
                 <small>*</small> 当前密码：
                </div>
                <div class="up-c-m-listRight">
                  <input class="originVal" type="password" placeholder="请输入原密码" v-model="originVal">
                </div>
              </div>
              <div class="up-c-m-list">
                <div class="up-c-m-listLeft">
                 <small>*</small> 新密码：
                </div>
                <div class="up-c-m-listRight">
                  <input type="password" placeholder="请输入新密码" v-model="newCodeVal" :class="{blueBorder: isBlueNewCodeVal,grayBorder: isGrayNewCodeVal}">
                </div>
              </div>
              <div class="up-c-m-listNews">
                <div class="up-c-m-listLeft">
                 
                </div>
                <div class="up-c-m-listNewsRight" :class="{blueTest: isBlueNewCodeVal,grayTest: isGrayNewCodeVal}">
                  新密码必须为6-16位(为数字、字母组合)
                </div>
              </div>
              <div class="up-c-m-list">
                <div class="up-c-m-listLeft">
                 <small>*</small> 确认密码：
                </div>
                <div class="up-c-m-listRight">
                  <input type="password" placeholder="请输入确认密码" v-model="butNewCodeVal" :class="{blueBorder: isBlueButNewCodeVal,grayBorder: isGrayButNewCodeVal}">
                </div>
              </div>
            </div>
            <div class="up-content-but">
              <div></div>
              <el-button type="primary" size="small" @click="affirmClick">保存</el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
const crypto = require("crypto");
export default {
  data() {
    return {
      memberIdVal: "", // 成员id
      butNewCodeVal: "", // 确认新密码
      isGrayButNewCodeVal: true,
      isBlueButNewCodeVal: false,
      newCodeVal: "", // 新密码
      isGrayNewCodeVal: true,
      isBlueNewCodeVal: false,
      originVal: "", // 原密码
      isGrayOriginVal: true,
      isBlueOriginVal: false,
      updatePwdShow: false, // 弹框显示隐藏
      affirmClickTrueOrFalse: true
    };
  },
  filters: {},
  created: function() {
    var self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
    }
    self.memberIdVal = sessionStorage.getItem("memberId");
  },
  methods: {
    // 点击修改密码
    updateClick() {
      this.$store.commit("setMutviewShow", true);
      this.updatePwdShow = true;
    },
    // 取消修改
    cancelClick() {
      this.$store.commit("setMutviewShow", false);
      this.updatePwdShow = false;
    },
    // 正则验证
    validateFun() {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      var regTwo = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (regOne.test(self.originVal) || !regTwo.test(self.originVal)) {
        self.isBlueOriginVal = true;
        self.isGrayOriginVal = false;
      } else {
        self.isBlueOriginVal = false;
        self.isGrayOriginVal = true;
      }
      if (regOne.test(self.newCodeVal) || !regTwo.test(self.newCodeVal)) {
        self.isBlueNewCodeVal = true;
        self.isGrayNewCodeVal = false;
      } else {
        self.isBlueNewCodeVal = false;
        self.isGrayNewCodeVal = true;
      }
      if (regOne.test(self.butNewCodeVal) || !regTwo.test(self.newCodeVal)) {
        self.isBlueButNewCodeVal = true;
        self.isGrayButNewCodeVal = false;
      } else {
        self.isBlueButNewCodeVal = false;
        self.isGrayButNewCodeVal = true;
      }
      if (self.isBlueNewCodeVal == true || self.isBlueButNewCodeVal == true) {
        return false;
      }
    },
    // 确认修改
    affirmClick() {
      var self = this;
      if (self.validateFun() == false) {
        return false;
      } else {
        this.$store.commit("setMutviewShow", false);
        if (self.newCodeVal !== self.butNewCodeVal) {
          self.$message({
            type: "info",
            message: "两次密码输入不一致，请重新输入"
          });
        } else {
          if (self.affirmClickTrueOrFalse == true) {
            self.affirmClickTrueOrFalse = false;
            var possible = self.originVal;
            var shaCode = crypto.createHash("md5");
            // .toUpperCase()
            var md5Str = shaCode.update(possible, "utf-8").digest("hex");
            var possibleNew = self.newCodeVal;
            var shaCodeNew = crypto.createHash("md5");
            // .toUpperCase()
            var md5StrNew = shaCodeNew
              .update(possibleNew, "utf-8")
              .digest("hex");
            self
              .getapiSettingChangePassword({
                memberId: self.memberIdVal,
                origin: md5Str,
                newCode: md5StrNew
              })
              .then(data => {
                self.affirmClickTrueOrFalse = true;
                if (data.statusCode == 200) {
                  self.$message({
                    type: "success",
                    message: "密码已修改成功,请使用新密码重新登录"
                  });
                  this.updatePwdShow = false;
                  self.$router.push({
                    path: "/login"
                  });
                } else {
                  self.$message({
                    type: "info",
                    message: data.statusMessage
                  });
                }
              })
              .catch(msg => {
                self.affirmClickTrueOrFalse = true;
                self.$message({
                  type: "info",
                  message: "服务器异常"
                });
              });
          }
        }
      }
    },
    ...mapActions(["getapiSettingChangePassword"])
  },
  watch: {
    originVal(val) {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      var regTwo = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (!regOne.test(val)) {
        self.isBlueOriginVal = false;
        self.isGrayOriginVal = true;
      }
    },
    newCodeVal(val) {
      var regOne = /^[\s]*$/; //输入不能为空
      var regTwo = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (!regOne.test(val)) {
        self.isBlueNewCodeVal = false;
        self.isGrayNewCodeVal = true;
      }
    },
    butNewCodeVal(val) {
      var regOne = /^[\s]*$/; //输入不能为空
      var regTwo = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (!regOne.test(val)) {
        self.isBlueButNewCodeVal = false;
        self.isGrayButNewCodeVal = true;
      }
    }
  }
};
</script>
<style scoped>
.up-c-m-listRight {
  margin-left: 30px;
}
.up-c-m-listRight .originVal {
  border: 1px solid #ccc;
}
.up-c-m-listLeft {
  width: 150px;
  text-align: right;
}
.up-c-m-listLeft small {
  color: red;
}
.up-c-m-listNewsRight {
  margin-left: 35px;
  font-size: 12px;
  width: 350px;
}
.up-c-m-listNews {
  width: 100%;
  display: flex;
  height: 30px;
  margin-top: 5px;
  align-items: center;
}
.up-c-m-listNews input,
.up-c-m-list input {
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  padding-left: 10px;
  width: 350px;
}
.up-c-m-list {
  margin-top: 20px;
  width: 100%;
  display: flex;
  height: 37px;
  align-items: center;
}
.up-content-but {
  height: 60px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e5e5;
}
.up-content-but > .el-button {
  margin-right: 25px;
}
.up-content-main {
  height: 240px;
  width: 100%;
  border-top: 1px solid #e5e5e5;
}
.up-content-title > div:nth-child(1) {
  margin-left: 15px;
}
.up-content-title > div:nth-child(2) {
  margin-right: 15px;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
}
.up-content-title {
  height: 52px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.updatePwd-content {
  width: 600px;
  height: 350px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 70px;
}
.updatePwd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slide-fade-enter-active {
  transition: all 0.7s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}
.install-title {
  height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.install-title > div {
  width: 91%;
  background-color: rgba(56, 173, 255, 0.2);
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #000;
  padding-left: 15px;
}
.install-main > div:nth-child(1) {
  width: 80px;
  height: 80px;
  margin-top: 45px;
}

.install-main .el-button {
  margin-top: 45px;
}
.install-main > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}
.install-main {
  min-height: 70px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

.versions {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  min-height: 500px;
}

.grayBorder {
  border: 1px solid #ccc;
}

.blueBorder {
  border: 1px solid #38adff;
}

.blueTest {
  color: #38adff;
}

.grayTest {
  color: #ccc;
}
</style>
